import React, {Component, PropTypes} from 'react'
import render from 'react-dom'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import Drawer from 'antd-mobile/lib/drawer/'
import 'antd-mobile/lib/drawer/style/index.less'
import List from 'antd-mobile/lib/list/'
import 'antd-mobile/lib/list/style/index.less'
import NavBar from 'antd-mobile/lib/nav-bar/'
import 'antd-mobile/lib/nav-bar/style/index.less'

const open = true,
      position = 'left';

class login extends Component {

    componentDidMount() {
    }

    onOpenChange(isOpen) {
        console.log(isOpen, arguments);
        return open ? !open : open
    }

    render() {
        const sidebar = (
            <List style={{minHeight: '100%' }}>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
                <List.Item>hello world</List.Item>
            </List>
        )

        const drawerProps = {
            open: open,
            position: position,
            onOpenChange: this.onOpenChange,
        }
        return (
            <div style={{ height: '100%' }}>
                <NavBar iconName="ellipsis" onLeftClick={this.onOpenChange}>
                    基本
                </NavBar>
                <div className="drawer-container">
                    <Drawer sidebar={sidebar}
                    dragHandleStyle={{ display: 'none' }}
                    contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
                    {...drawerProps}
                    >
                    请点击左上角图标
                    </Drawer>
                </div>
            </div>
        )
    }
}

const contextTypes = {
    router: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
}

login.contextTypes = contextTypes;

function mapStateToProps(state) {
  return {
  }
}
//将action的所有方法绑定到props上
function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators({
      }, dispatch)
  }
}

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(mapStateToProps, mapDispatchToProps)(login)